<template>
  <div>
    <van-skeleton title :row="10" v-if="!goodsObj.title" style="margin-top:33px"/>
    <div v-else>
    <van-nav-bar title="数据诊断详情" left-arrow @click-left="onClickLeft" fixed />
    <div class="main" style="margin-top:50px">
      <InfoPanelGroup title="数据通讯服务">
        <div class="floor">
          <div class="header">
            <h5>通用数据通信服务产品</h5>
            <div class="en">CMIOT</div>
            <div class="state" style="color:chartreuse">有效</div>
          </div>
          <div class="content">
            <ul>
              <li><span>核心网状态</span>
                <p>停机:功能已开通，策略可用</p>
              </li>
              <li><span>封顶关停</span>
                <p>订购封停解除资费</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="floor">
          <div class="header">
            <h5>物联卡专用数据通信服务产品</h5>
            <div class="en">TEST</div>
            <div class="state" style="color:darkorange">暂停</div>
          </div>
          <div class="content">
            <ul>
              <li><span>核心网状态</span>
                <p>停机:功能已开通，策略关停</p>
              </li>
              <li><span>主动关停</span>
                <p><span class="btn">服务启动</span></p>
              </li>
              <li><span>流量用尽</span>
                <p>订购用尽关停解除资费</p>
              </li>
            </ul>
          </div>
        </div>
      </InfoPanelGroup>
      <InfoPanelGroup :title="goodsObj.title">
        <InfoPanelItem v-for="(item, index) in goodsObj.list" :key="index" :label="item.label" :state="item.state" :effTime="item.effTime" :expTime="item.expTime"></InfoPanelItem>
      </InfoPanelGroup>
      <InfoPanelGroup :title="groupObj.title">
        <InfoPanelItem v-for="(item, index) in groupObj.list" :key="index" :label="item.label" :identify="item.identify" :effTime="item.effTime" :expTime="item.expTime" :stateBottom="item.stateBottom"></InfoPanelItem>
      </InfoPanelGroup>
      <InfoPanelGroup title="免费资源">
        <InfoPanelItem label="单卡免费资源">
          <ul class="resource">
            <li><span>总量</span>
              <p>10000M</p>
            </li>
            <li><span>已使用量</span>
              <p>2000M</p>
            </li>
            <li><span>剩余量</span>
              <p>8000M</p>
            </li>
          </ul>
        </InfoPanelItem>
        <InfoPanelItem label="群组免费资源">
          <ul class="resource">
            <li><span>总量</span>
              <p>500M</p>
            </li>
            <li><span>已使用量</span>
              <p>100M</p>
            </li>
            <li><span>剩余量</span>
              <p>400M</p>
            </li>
          </ul>
        </InfoPanelItem>
      </InfoPanelGroup>
    </div>
  </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "DataDetail",
  data() {
    return {
      goodsObj: {},
      groupObj: {},
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      const res = await axios.get("https://mock.apifox.cn/m1/1421717-0-default/goods/service");
      this.goodsObj = res.data.data.goods;
      this.groupObj = res.data.data.group;
      console.log(this.goodsObj);
    },
    onClickLeft(){
      this.$router.go(-1)
    }
  },
}
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar {
  background-color: #319aff;
  .van-icon {
    color: #fff;
  }
  .van-nav-bar__title {
    color: #fff;
  }
}
.floor {
  padding: 0 14px;
  overflow: hidden;
  .header {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    h5 {
      font-size: 13.365px;
      font-weight: bold;
      color: #323233;
    }
    .en {
      color: #319aff;
    }
  }
  .content {
    ul {
      padding-right: 30px;
      li {
        display: flex;
        justify-content: space-between;
        margin: 10px 0;
        font-size: 12px;
        p {
          width: 160px;
        }
        .btn {
          display: block;
          width: 100px;
          color: #319aff;
          text-align: center;
          border: 1px solid #319aff;
          border-radius: 10px;   
        }
      }
    }
  }
}
.resource {
  padding-right: 70px;
  font-size: 12px;
  li {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
    p {
      width: 80px;
    }
  }
}
</style>